<!-- global-breadcrumb/index.vue -->
<template>
    <div 
      v-if="showBreadcrumb && breadcrumbs.length > 0" 
      class="global-breadcrumb"
      :class="breadcrumbClasses"
    >
      <el-breadcrumb 
        :separator="separator"
        :separator-icon="separatorIcon"
        class="breadcrumb-container"
      >
        <!-- 🎯 遍历面包屑数据 -->
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbs"
          :key="item.key"
          :to="item.path && index < breadcrumbs.length - 1 ? item.path : undefined"
          :class="breadcrumbItemClasses(item, index)"
        >
          <!-- 🎯 有下拉菜单的面包屑项 -->
          <el-dropdown 
            v-if="item.options?.length" 
            @command="handleDropdownCommand"
            class="breadcrumb-dropdown"
          >
            <div class="breadcrumb-content">
              <!-- 图标 -->
              <el-icon v-if="showIcon && item.icon" class="breadcrumb-icon">
                <component :is="item.icon" />
              </el-icon>
              <!-- 文字 -->
              <span class="breadcrumb-text">{{ item.label }}</span>
              <!-- 下拉箭头 -->
              <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="option in item.options"
                  :key="option.key"
                  :command="option.path"
                >
                  <el-icon v-if="option.icon">
                    <component :is="option.icon" />
                  </el-icon>
                  {{ option.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
          <!-- 🎯 普通面包屑项 -->
          <div v-else class="breadcrumb-content">
            <!-- 图标 -->
            <el-icon v-if="showIcon && item.icon" class="breadcrumb-icon">
              <component :is="item.icon" />
            </el-icon>
            <!-- 文字 -->
            <span class="breadcrumb-text">{{ item.label }}</span>
          </div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ArrowDown, House, Setting, User, Avatar } from '@element-plus/icons-vue'
  import { useLayoutManage } from '@/layouts/layoutManage.js'
  import { useDevice } from '@/composables/useDevice.js'
  
  // 🎯 Props
  const props = defineProps({
    showIcon: {
      type: Boolean,
      default: true
    },
    separator: {
      type: String,
      default: '/'
    },
    separatorIcon: {
      type: [String, Object],
      default: undefined
    }
  })
  
  // 🎯 Composables
  const route = useRoute()
  const router = useRouter()
  const { isMobile } = useDevice()
  const { layoutSetting } = useLayoutManage()
  
  // 🎯 是否显示面包屑
  const showBreadcrumb = computed(() => {
    return layoutSetting.showBreadcrumb && !isMobile.value
  })
  
  // 🎯 面包屑数据生成
  const breadcrumbs = computed(() => {
    const pathArray = route.path.split('/').filter(Boolean)
    const breadcrumbList = []
    
    // 🏠 首页面包屑
    breadcrumbList.push({
      key: 'home',
      label: '首页',
      icon: House,
      path: '/dashboard'
    })
    
    // 🎯 根据路径生成面包屑
    let currentPath = ''
    pathArray.forEach((segment, index) => {
      currentPath += `/${segment}`
      
      // 路径映射配置
      const breadcrumbMap = {
        '/dashboard': { label: '仪表板', icon: House },
        '/system': { 
          label: '系统管理', 
          icon: Setting,
          options: [  // 🎯 支持下拉菜单
            { key: 'system_user', label: '用户管理', path: '/system/user', icon: User },
            { key: 'system_role', label: '角色管理', path: '/system/role', icon: User },
            { key: 'system_menu', label: '菜单管理', path: '/system/menu', icon: Setting }
          ]
        },
        '/system/user': { label: '用户管理', icon: User },
        '/system/role': { label: '角色管理', icon: User },
        '/system/menu': { label: '菜单管理', icon: Setting },
        '/user': { label: '用户中心', icon: Avatar },
        '/user/profile': { label: '个人资料', icon: User },
        '/user/setting': { label: '账户设置', icon: Setting },
        '/about': { label: '关于系统', icon: Setting }
      }
      
      const breadcrumbInfo = breadcrumbMap[currentPath]
      if (breadcrumbInfo) {
        breadcrumbList.push({
          key: `breadcrumb-${index}`,
          label: breadcrumbInfo.label,
          icon: breadcrumbInfo.icon,
          path: index < pathArray.length - 1 ? currentPath : undefined, // 最后一项不可点击
          options: breadcrumbInfo.options
        })
      }
    })
    
    // 🎯 去重处理（避免首页重复）
    const uniqueBreadcrumbs = breadcrumbList.filter((item, index, array) => {
      return array.findIndex(bread => bread.path === item.path) === index
    })
    
    return uniqueBreadcrumbs
  })
  
  // 🎯 面包屑样式类
  const breadcrumbClasses = computed(() => [
    'breadcrumb-wrapper',
    {
      'breadcrumb-with-icon': props.showIcon,
      'breadcrumb-mobile-hidden': isMobile.value
    }
  ])
  
  // 🎯 面包屑项样式类
  function breadcrumbItemClasses(item, index) {
    return [
      'breadcrumb-item',
      {
        'breadcrumb-item-active': index === breadcrumbs.value.length - 1,
        'breadcrumb-item-clickable': item.path,
        'breadcrumb-item-dropdown': item.options?.length > 0
      }
    ]
  }
  
  // 🎯 事件处理
  
  // 处理下拉菜单点击
  function handleDropdownCommand(path) {
    if (path) {
      router.push(path)
      console.log('🧭 面包屑下拉菜单跳转:', path)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .global-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    
    // 🎯 面包屑容器
    .breadcrumb-container {
      flex: 1;
      min-width: 0;
    }
    
    // 🎯 面包屑内容
    .breadcrumb-content {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s;
      
      &:hover {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }
      
      .breadcrumb-icon {
        font-size: 14px;
        flex-shrink: 0;
      }
      
      .breadcrumb-text {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .dropdown-arrow {
        font-size: 12px;
        margin-left: 4px;
        color: var(--el-text-color-regular);
      }
    }
    
    // 🎯 下拉面包屑样式
    .breadcrumb-dropdown {
      .breadcrumb-content {
        padding: 6px 8px;
        border-radius: 6px;
      }
    }
    
    // 🎯 移动端隐藏
    &.breadcrumb-mobile-hidden {
      display: none;
    }
  }
  
  // 🎯 Element Plus 面包屑样式覆盖
  :deep(.el-breadcrumb) {
    font-size: 14px;
    
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: var(--el-text-color-regular);
        font-weight: normal;
        
        &:hover {
          color: var(--el-color-primary);
        }
        
        &.is-link {
          cursor: pointer;
        }
      }
      
      // 🎯 最后一项（当前页）样式
      &:last-child {
        .el-breadcrumb__inner {
          color: var(--el-text-color-primary);
          font-weight: 600;
          cursor: default;
          
          &:hover {
            color: var(--el-text-color-primary);
          }
        }
      }
      
      // 🎯 分隔符样式
      .el-breadcrumb__separator {
        color: var(--el-text-color-placeholder);
        margin: 0 8px;
      }
    }
  }
  
  // 🎯 下拉菜单样式
  :deep(.el-dropdown-menu) {
    .el-dropdown-menu__item {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .el-icon {
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
      
      &:hover .el-icon {
        color: var(--el-color-primary);
      }
    }
  }
  </style>